import React,{Component} from  'react'
import {getChildrenCategory,updateCategoryName} from "../../redux/productCategory.redux";
import {connect} from 'react-redux'
import { Link } from 'react-router-dom'
import {Table,Button} from 'antd'
import ShowModal from "../../component/Alert";
import './productCategory.less'


class ChildrenCategory extends Component{
    constructor(props){
        super(props);
    }
    showModel(id,name,e)
    {
        this.modal.showModal(id,name)
    }
    componentDidMount() {
        this.props.getChildrenCategory(this.props.match.params.id);
    }
    updateName(id ,name){
        this.props.updateCategoryName(id ,name)
    }
    render(){
        const columns = [{
            title: '品类ID',
            dataIndex: 'id',
            width: 120
        }, {
            title: '品类名称',
            dataIndex: 'name',
        },
            {
                title: '操作', dataIndex: 'id', key: 'x',width: 200,
                render: (id,obj) => (<div>
                    <a onClick={this.showModel.bind(this,id,obj.name)} style={{padding:5}} href="javascript:;">修改名字</a>
                </div>)
            }
        ];
        return (
               <div className='productCategory'>
                   {this.props.category.updateSuccess? this.props.getChildrenCategory(this.props.match.params.id):null}
                   <ShowModal    updateName={this.updateName.bind(this)} ref={(modal) => this.modal = modal}/>
                    <h1 className='page-header'>品类管理</h1>
                   <div className='productId'>
                       <span>当前品类ID：{this.props.match.params.id}</span>
                   </div>

                   <div className="addBtn">
                       <Link to="/product-category/add/">
                           <Button type="primary" icon="plus">添加品类</Button>
                       </Link>
                   </div>


                   <Table size='small'
                          columns={columns}
                          dataSource={this.props.category.data_children}
                          bordered
                   />
                </div>
        )
    }
}
function mapStateToProps(state){

    return state;
}

const mapDispatchToProps = (dispatch) => ( { // <- forgot the wrapping with ( here
    getChildrenCategory: (category) => {
        dispatch(getChildrenCategory(category))
    },
    updateCategoryName:(id,name)=>{
        dispatch(updateCategoryName(id,name))
    }
})


export default connect(mapStateToProps, mapDispatchToProps)(ChildrenCategory);